<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏内页</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/gamepage.css">
  <link rel="stylesheet" href="./assets/iconfont/sugar/iconfont.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="left">
      <img src="./assets/images/logo.png" alt="logo">
    </div>
    <div class="right">
      <ul>
        <li>
          <a href="./index.html" target="_blank">
            <p>首页</p>
            <p>home</p>
          </a>
        </li>
        <li>
          <a href="./gamelist.html" target="_blank">
            <p>游戏</p>
            <p>game</p>
          </a>
        </li>
        <li>
          <p>案例</p>
          <p>Case</p>
        </li>
        <li>
          <p>关于我们</p>
          <p>About us</p>
        </li>
      </ul>
    </div>
    <div class="weibo">
      <i class="iconfont icon-weibo"></i>
    </div>
  </header>
  <section>
    <div class="top">
      <p>宝石迷阵</p>
      <p>《宝石迷阵》与暴司时候发行的游的的戏《星际争霸》一样，是一款成功的即时战略游戏。
        游戏时战略游戏所要素：建设基地和指挥指挥战斗。游戏的操作方式也，秉承了星霸优点，
        并对星际争霸中一些繁琐的操作进行了简化。</p>
      <button>收藏</button>
      <button>制作游戏</button>
      <button>购买</button>
    </div>
    <div class="center">
      <img src="./assets/images/page-phone.png" alt="phone">
      <li>
        <p>时间</p>
        <p>2014-07-09</p>
      </li>
      <li>
        <p>价格</p>
        <p>2333</p>
      </li>
      <li>
        <p>使用次数</p>
        <p>20</p>
      </li>
      <li>
        <p>大小</p>
        <p>1034KB</p>
      </li>
      <div class="cir">
        <i class="iconfont icon-shijian"></i>
      </div>
      <div class="cir">
        <i class="iconfont icon-jiage"></i>
      </div>
      <div class="cir">
        <i class="iconfont icon-wujiaoxingkong"></i>
      </div>
      <div class="cir">
        <i class="iconfont icon-wenjian"></i>
      </div>


    </div>
    <div class="bottom">
      <p>使用方法</p>
      <p>use Methods</p>
      <div class="last">
        <div class="one">
          <img src="./assets/images/page01.png" alt="page01">
          <p>step one</p>
          <p>选择一个游戏，换图</p>
        </div>
        <i class="iconfont icon-double-arrow-right"></i>
        <div class="one">
            <img src="./assets/images/page02.png" alt="page02" class="pic2">
          <p class="text2">The second step</p>
          <p>选择一个游戏，换图</p>
        </div>
        <i class="iconfont icon-double-arrow-right"></i>
        <div class="one">
          <img src="./assets/images/page03.png" alt="page03" class="pic3">
          <p>The third step</p>
          <p>选择一个游戏，换图</p>
        </div>
      </div>
    </div>
  </section>
  <!-- 尾部 -->
  <footer>
    <img src="./assets/images/bottom01.png" alt="bottom01">
    <p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
    <img src="./assets/images/bottom02.png" alt="bottom02">
  </footer>
</body>

</html>